<template>
	<view class="content">
		<view class="problem">
			<view class="backImg">
				<image lazy-load="true" src="../../static/img/index/guessBack.png" class="response"></image>
			</view>
			<view class="txt">{{responseData.qDoc}}<text class="answerNote">{{responseData.qHint}}</text></view>
			<view class="answer">
				<view class="a-item" v-for="(item, index) in responseData.codeList" :key="index">{{item.code}}</view>
			</view>
		</view>
		<view class="numInfo">
			<view class="myPower">体力：{{myPower}}</view>
			<view class="hasScore">彩豆：{{hasScore}}</view>
		</view>
		<view class="tool">
			<view class="btn next" @click="gameRule">游戏规则</view>
			<view class="btn result" @click="toGetResult">解谜精灵</view>
			<button class="btn help" open-type="share">好友协助</button>
			<view class="btn clearAll" @click="clearAll">清空重来</view>
		</view>

		<view class="randomCode">
			<view :class="[item.randomCodeSelect?randomCodeSelectClass:randomCodeBaseClass]"
				@click="setCode(item.code,index)" v-for="(item, index) in responseData.randomList" :key="index">
				{{item.code}}
			</view>
		</view>

		<!-- <view class="noteTxt">
			<view class="ruleTitle">规则：</view>
			<view class="rule" v-for="(item, index) in responseData.noteList" :key="index">
				{{item}}
			</view> 
		</view> -->
		
		<uni-popup ref="popupNote" type="center">
			<view class="popupNote-v">
				<view class="title">玩法解说</view>
				<scroll-view class="itemBox" :scroll-y="true">
					<view class="ruleItem" v-for="(item, index) in ruleList" :key="index" >
						{{item}}
					</view>
				</scroll-view>
				<view class="knowBtn" @click="doKnowNote">知道了</view>
			</view>
		</uni-popup>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				ruleList:[
				],
				questionId:'',
				cateId: '',
				share: {
					title: "",
					path: '',
					imageUrl: '',
					desc: '',
					content: ''
				},
				hasScore:0,
				myPower:0,
				errorCount: 0, //错误次数
				randomCodeBaseClass: 'code',
				randomCodeSelectClass: 'selectColor',
				randomCodeSelect: false,
				responseData: { //响应数据
					randomList: [],
					codeList: [],
					qDoc: '',
					noteList: [],
					qHint: '',
					id: '' //题目id
				}
			}
		},
		onLoad(option) {
		let	questionId =  option.questionId;
			if( null != questionId && questionId.length>0){
				//获取好友请求帮忙数据
				this.getQuestionInfoById(option.questionId);
			}else{
				let cateId = option.cateId;
				this.cateId = cateId;
				this.getQuestionInfo(cateId);
			}
		},
		methods: {
			getQuestionInfoById(questionId){
				let opts = {
					url: 'guess/getQuestionInfoById/' + questionId,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					let rData = res.data;
					this.responseData.randomList = rData.randomList;
					this.responseData.codeList = rData.codeList;
					this.responseData.noteList = rData.noteList;
					this.responseData.qDoc = rData.qdoc;
					this.responseData.qHint = rData.qhint;
					this.cateId = rData.cateId;
					this.hasScore = rData.hasScore;
					this.myPower = rData.myPower;
					this.responseData.id = rData.id;
					this.share =rData.inviteFriendShare;
					uni.hideLoading();
				}, error => {})
			},
			getNext() { //下一题
				// this.getQuestionInfo(this.cateId);
			},
			getQuestionInfo(cateId) { //获取谜语信息
				let opts = {
					url: 'guess/getQuestionInfo/' + cateId,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					let rData = res.data;
					this.responseData.randomList = rData.randomList;
					this.responseData.codeList = rData.codeList;
					this.responseData.noteList = rData.noteList;
					this.responseData.qDoc = rData.qdoc;
					this.responseData.qHint = rData.qhint;
					this.responseData.id = rData.id;
					this.cateId = rData.cateId;
					this.hasScore = rData.hasScore;
					this.myPower = rData.myPower;
					this.share =rData.inviteFriendShare;
					uni.hideLoading();
				}, error => {})
			},gameRule(){
				this.$refs.popupNote.open();
				let opts = {
					url: 'guess/gameRule',
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					let rData = res.data;
					this.ruleList = rData;
					uni.hideLoading();
				}, error => {})
			},
			doKnowNote(){
				this.$refs.popupNote.close();
			},
			toGetResult() { //选择使用解谜精灵
				let that = this;
				let opts = {
					url: 'guess/getSmartCount',
					method: 'get'
				};
				let param = {}; 
				that.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					if(rData <1){
						wx.showToast({
							title: '可用解谜'+rData+'次!',
							icon: 'none',
							duration: 2000
						})
					}else{
						uni.showModal({
							title: '提示',
							content: '可用解谜'+rData+'次,是否使用？',
							success: function(res) {
								if (res.confirm) {
									uni.showLoading({
									    title: '解谜中'
									});
									//去使用解谜精灵
									let opts = {
										url: 'guess/getResult/' + that.responseData.id,
										method: 'post'
									};
									let param = {}; 
									that.tokenRequest(opts, param).then(res => {
										 uni.hideLoading();
										let rData = res.data;
										uni.showModal({
											title: '谜底',
											mask: true,
											showCancel: false,
											confirmText: '知道了',
											content: rData,
											success: function(res) {
											}
										})
									}, error => {})
								} else if (res.cancel) {
									//不使用
									//提示可以获取次数的方式
								}
							}
						})
					}
				}, error => {})
			},
			setCode(val, index) { // 填写选择答案
				let that = this;
				let codeLength = this.responseData.codeList.length;
				for (var i = 0; i < codeLength; i++) {
					if (this.responseData.codeList[i].code.length == 0) {
						if (this.responseData.randomList[index].randomCodeSelect) {
							wx.showToast({
								title: '重复选择',
								icon: 'none',
								duration: 2000
							})
							break;
						}
						this.responseData.codeList[i].code = val;
						this.responseData.randomList[index].randomCodeSelect = true;
						if (codeLength - 1 == i) {//答题完成进行答案核对
							let isCorrent = false; //是否正确
							let answerStr = '';
							for (let i = 0; i < this.responseData.codeList.length; i++) {
								answerStr += this.responseData.codeList[i].code;
							}
							let opts = {
								url: 'guess/comparResult/' + this.responseData.id + '/' + answerStr,
								method: 'post'
							};
							let param = {};
							this.tokenRequest(opts, param).then(res => {
								uni.hideLoading();
								let rData = res.data;
								wx.showToast({
									icon: 'none',
									mask: true,
									title: rData.scoreDesc,
									duration: 2000
								})
								if (rData.isCorrent) {
									//进入下一题
									that.errorCount = 0;
									setTimeout(function() {
										that.getQuestionInfo(that.cateId);
									}, 1500)

								} else {
									that.clearAll();//答错清除答案
								}
							}, error => {})
						}
						break;
					}
				}
			},
			clearAll() { // 清除答案
				for (var i = 0; i < this.responseData.codeList.length; i++) {
					this.responseData.codeList[i].code = '';
				}
				for (var i = 0; i < this.responseData.randomList.length; i++) {
					this.responseData.randomList[i].randomCodeSelect = false;
				}
			}

		}
	}
</script>

<style>
	
	.popupNote-v{
		font-size: 36rpx;
		background-color: #fff;
		width: 600rpx;
		padding: 20rpx;
		text-align: center;
		border-radius: 15rpx;
	}
	
		
	.popupNote-v .title{
		margin-bottom: 30rpx;
		font-weight: 800;
	}
	.popupNote-v .ruleItem{
		text-align: left;
		font-size: 30rpx;
	}
	.popupNote-v .knowBtn{
		margin-top: 20rpx;
		padding-top: 20rpx;
		color: #A14C46;
		border-top: 1rpx solid #555;
	}
	
	.problem {
		width: 750rpx;
		height: 422rpx;
		color: #fff;
		position: relative;
	}
	.ruleTitle{
		font-size: 36rpx !important;
		font-weight: 800 !important;
		color: #000;
	}
	.help {
		color: #F0AD4E !important;
	}

	.txt {
		position: absolute;
		text-align: center;
		width: 670rpx;
		top: 50rpx;
		font-weight: 800;
		font-size: 33rpx;
		padding: 0 40rpx;
	}
	.numInfo{
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		display: flex;
	}
	.hasScore,.myPower{
		text-align: center;
		width: 375rpx;
		font-size: 36rpx;
		color: #FF4E50;
		font-weight: 800;
	}
	.answer {
		padding: 0 40rpx;
		width: 670rpx;
		position: absolute;
		text-align: center;
		bottom: 50rpx;
	}

	.a-item {
		width: 70rpx;
		border: 2rpx solid #FF7800;
		display: inline-block;
		background-color: #fff;
		border-radius: 10rpx;
		color: #A14C46;
		line-height: 70rpx;
		font-weight: 800;
		margin: 0 5rpx;
		font-size: 40rpx;
	}

	.answerNote {
		font-size: 28rpx;
		color: #FF7800;
		display: block;
		margin-top: 20rpx;
	}

	.response {
		width: 750rpx;
		height: 422rpx;
	}

	.tool {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 32rpx !important;
		overflow: hidden;
	}

	button {
		margin: 0;
		padding: 0;
		font-size: 32rpx;
		text-align: center;
		outline: none;
		width: 146rpx;
		border-radius: 0;
		background-color: transparent;
		line-height: inherit;
		width: max-content;
	}

	button:after {
		border: none;
	}

	.tool .btn {
		position: relative;
		background-color: #A14C46;
		width: 146rpx;
		color: #fff;
		float: left;
		font-weight: 900;
		margin-left: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		padding: 8rpx;
	}

	.tool .btn:active {
		top: 8rpx;
	}

	.randomCode {
		background-color: #fff;
		margin-top: 50rpx;
		padding: 20rpx;
		clear: both;
		margin: 15rpx;
		overflow: scroll;
		font-size: 40rpx;
		font-weight: 800;
		border-radius: 15rpx;
	}

	.code {
		position: relative;
		background-color: #E9DDBF;
		color: #A14C46;
		width: 96rpx;
		line-height: 96rpx;
		text-align: center;
		margin: 8rpx;
		border-radius: 10rpx;
		float: left;
	}

	.code:active {
		top: 8rpx;
	}

	.selectColor {
		background-color: #A14C46 !important;
		color: #E9DDBF !important;
		width: 96rpx;
		line-height: 96rpx;
		text-align: center;
		margin: 8rpx;
		border-radius: 10rpx;
		float: left;
	}

	.noteTxt {
		padding: 10rpx 20rpx;
		color: #ED1941;
		font-size: 29rpx;
	}

	.clearAll {
		color: #EA552D !important;
	}

	.next {
		color: #7fb80e !important;
	}

	.result {
		color: #afb4db !important;
	}
</style>
